import React, { Component } from 'react';
// import {Router, Route, Link } from 'react-router';
import {BrowserRouter as Router, Route, Link, NavLink, withRouter} from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import NameCard from './components/NameCard'
import Button from './components/Button'
import NoState from './components/NoState'
import Counter from './components/CountDown'
import ListItem from './components/ListItem'
import TestHooks from './components/TestHooks'
import FunctionComponent from './components/functionComponent'
import ListWrapper from './components/Wrapper/ListWrapper'
import ContainerInfo from './components/Container/ContainerInfo'
import Page1 from './components/Page/Page1'
import Page2 from './components/Page/Page2'
import Page3 from './components/Page/Page3'
import ConButton from './components/Button/ConButton'
import ConDashBoard from './components/DashBoard/ConDashBoard'



const tags = [
  {
    name:'皮皮虾',
    age:17
  },
  {
    name:'健身达人',
    age:28
  },
  {
    name:'好好学习',
    age:16
  }
]
const red = {
  color:'pink'
}

// 组件1 
const Home = ()=> (
  <div>
    <h1>这是home组件</h1>
  </div>
)

// 组件2 

const Con = ()=> (
  <div>
    <h1>这是Button组件</h1>
    <button type="button">Button</button>
  </div>
)

const WrapperStyle = {
  background:'green',
   border:'none',
   padding:'14px 16px',
   color:'#fff'
}
// 组件3 
const Wrapper = function() {
  return (
   <div>
     <h4>这是包裹组件</h4>
     <button type="button" cursor="pointer" style={WrapperStyle}>下载</button>
   </div> 
  )
}

const LinkUI = {
  textDecoration:'none',
  color:'red',
  padding:'10px 16px',
  margin:'30px 0',
  display:'inline-block',
  fontWeight:'550'
}

class App extends Component {
  render() {
    return (
        <Router>
          <div className="App">
              <Link style={LinkUI} to="/"> HOME</Link>
              <Link style={LinkUI} to="/Con"> Con</Link>
              <Link style={LinkUI} to="/Wrapper"> Wrapper</Link>
              <Link style={LinkUI} to="/ConButton/123"> ConButton</Link>
              <Link style={LinkUI} to="/ConDashBoard"> ConDashBoard</Link>
              {/* <hr/> */}

              <Route path="/" exact  component={Home}></Route>
              <Route path="/Con" > <Con/></Route>
              <Route path="/Wrapper" component={Wrapper}></Route>
              <Route path="/ConDashBoard" component={ConDashBoard}></Route>
              <Route path="/ConButton/:id" component={ConButton}></Route>
          </div>
        </Router>
    );
  }
}

export default App;
